<template>
	<view class='center'>
		<view class='center-list'>
			<view class="pics">
				<scroll-view class="list" scroll-y v-for="(item,index) in navLeft" :key="index">
					<view :class="{'active':isActive === index}" @click="checked(index,item.id)">
						<view :class="{'block':isblock === index}" @click="checked(index,item.id)">
						</view>
						<view class="tit">
							{{item.name}}
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="content">
			<view class="content_center">
				<view class="smallbox" v-for="item in goodslist" :key="item.id" @click="jump(item.id)">
					<image :src="item.pic"></image>
					<view class="title_content">
						<text>{{item.characteristic}}</text>
					</view>
					<view class="price">
						￥{{item.minPrice}}
					</view>
				</view>

			</view>
			<view class="bottom">
				<text>没有更多了~</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		goodsCategory,
		goodsList
	} from "../../banner/banner.js"
	export default {
		data() {
			return {
				isblock: 0,
				isActive: 0,
				navLeft: [],
				goodslist: [],
				categoryId: ""
			}
		},
		methods: {
			checked(index, id) {
				this.categoryId = id
				this.isActive = index
				this.isblock = index
				this.getgoodslist(id)

			},
			// 商品分类
			getCategory() {
				goodsCategory().then(res => {
					if (res.code === 0) {
						this.navLeft = res.data
						this.categoryId = res.data[0].id;
						console.log(this.categoryId);
					}
				})
			},
			// 商品详情
			getgoodslist() {
				// console.log(String(index));
				goodsList().then(res => {
					if (res.code === 0) {
						this.goodslist = res.data.result.filter(res => {
							return res.categoryId === this.categoryId
						})
					}
				})
			},
		    jump(id){
				uni.navigateTo({
					url:"/pages/detail/detail?id="+ id
				})
				// console.log(id)
			}
		},
		onReady() {
			this.getCategory()
			this.getgoodslist()
		}
	}
</script>

<style lang="scss" scoped>
	page {
		height: 100%;

		.center {
			width: 100%;
			min-width: 375rpx;
			height: 100%;
			display: flex;

			// 左边tab
			.center-list {
				width: 30%;
				height: 100%;
				background-color: rgb(247, 248, 250);
				overflow-y: auto;
				box-sizing: border-box;

				.pics {
					width: 100%;
					height: 100%;


					.list {
						width: 100%;
						height: 100rpx;
						line-height: 100rpx;

						.list>view {
							height: 28rpx;
							line-height: 28rpx;
							display: flex;
							text-align: center;
							/*  background-color: #f1f1f1; */
							font-size: 28rpx;
							color: #666;
						}

						.active {
							color: #333;
							font-weight: 700;
							height: 100rpx;

							display: flex;
							background-color: #fff;

						}

						.block {

							width: 8rpx;
							height: 20rpx;
							background-color: rgb(27, 167, 132);
							position: absolute;
							top: 40%;
							left: 0rpx;
						}

						.tit {
							margin-left: 20rpx;
							height: 50rpx;
						}
					}
				}
			}
		}

		// 右边内容
		.content {

			width: 70%;

			overflow: auto;

			.content_center {
				display: flex;
				justify-content: space-around;
				flex-wrap: wrap;
				margin-bottom: 10%;

				.smallbox {
					width: 48%;
					// background-color: #ccc;
					border-radius: 4rpx;

					.title_content>text {
						overflow: hidden; //溢出内容隐藏
						text-overflow: ellipsis; //文本溢出部分用省略号表示
						display: -webkit-box; //特别显示模式
						-webkit-line-clamp: 2; //行数
						line-clamp: 2;
						-webkit-box-orient: vertical; //盒子中内容竖直排列

					}

					image {
						width: 100%;
					}

					.price {
						color: green;
					}
				}
			}


			.bottom {
				text-align: center;
				color: #ccc;
			}
		}




	}
</style>
